<template>
	<app-layout>
		<view class="mine tn-safe-area-inset-bottom">
			<!-- 顶部自定义导航 -->
			<tn-nav-bar>{{title}}</tn-nav-bar>
			<view class="about__wrap" :style="{paddingTop: vuex_custom_bar_height + 'px'}">

				<!-- 我的信息  查看-->
				<view class=" tn-padding-bottom-xl tn-bg-white">
					<block>
						<!-- 我的信息  编辑-->
						<view class="tn-padding ">
							<tn-form :labelWidth="150" :model="form" ref="uForm" :errorType="['message']">
								<tn-form-item :label="label" prop="num" :required="true">
									<tn-input v-model="form.numtext" type="select" :selectOpen="typeShow"
										:placeholder='place' @click="typeShow = true" />
									<tn-select labelName="details" valueName="num" v-model="typeShow" :list="typelist"
										@confirm="typeconfirm"></tn-select>
								</tn-form-item>
								<tn-form-item label="标题" prop="title" :required="true">
									<tn-input v-model="form.title" type="text" placeholder="请输入标题"></tn-input>
								</tn-form-item>
								<tn-form-item label="内容" prop="content" :required="true">
									<tn-input v-model="form.content" type="textarea" :height="500"
										placeholder='请输入内容' />
								</tn-form-item>

							</tn-form>

						</view>

					</block>
				</view>
			</view>

			<bottom-btn @save="save" @submit="submit"></bottom-btn>

			<view class='tn-tabbar-height'></view>

		</view>
	</app-layout>
</template>

<script>
	import locationmixin from '@/libs/mixin/location_mixin.js'
	export default {
		name: 'checkdetail',
		mixins: [locationmixin],
		data() {
			return {
				typeShow: false,
				typelist: [],

				numtext: '',
				form: {
					mfid: '',
					dictionaryid: '',
					num: '',
					title: '',
					content: '',
				},
				rules: {
					num: [{
						required: true,
						message: '请选择类型',
						trigger: 'blur,change'
					}],
					title: [{
						required: true,
						message: '请输入标题',
						trigger: 'blur,change'
					}],
					content: [{
						required: true,
						message: '请输入内容',
						trigger: 'blur,change'
					}],

				}

			}
		},
		computed: {
			label() {
				return this.form.dictionaryid == 25 ? '救助类型' : '检举类型'
			},
			place() {
				return this.form.dictionaryid == 25 ? '请选择救助类型' : '请选择检举类型'
			},
			title() {
				return this.dictionaryid == 25 ? '救援求助' : '检举举报'
			}
		},
		onLoad(options) {
			let t = this;
			this.form.mfid = options.mfid ? options.mfid : this.form.mfid;
			this.form.dictionaryid = options.dictionaryid ? options.dictionaryid : this.form.dictionaryid;
			if (!this.form.mfid) {
				uni.showModal({
					title: '提示',
					content: '用户ID不存在，请稍后再试',
					showCancel: false,
					success() {
						t.goBack()
					}
				})
			}
			this.gettypelist()
		},
		onReady() {
			// this.$refs.uForm.resetFields()
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			save() {

			},
			init(){
				
			},
			submit() {
				let t = this;
				this.form.issx = this.form.issx ? 1 : 0
				this.form.qingjialei = this.typelist[0].num
				this.$refs.uForm.validate(valid => {
					if (valid) {
						// 验证通过
						console.log('验证通过')
						t.add()
					} else {
						// 验证失败
						console.log('验证失败')
					}
				})
			},
			add(param) {
				let t = this;
				this.$t.message.loading("提交中");
				this.$request({
					url: t.$api.help.add,
					data: t.form,
					method: 'POST'
				}).then(response => {
					t.$t.message.closeLoading();
					if (response.code === 0) {
						t.$t.message.toast(response.msg);
						let url =
							`/discoveryPages/help/list?mfid=${t.form.mfid}&dictionaryid=${t.form.dictionaryid}`
						uni.redirectTo({
							url: url
						});
					} else {
						uni.showModal({
							title: '',
							content: response.msg,
							showCancel: false,
						});
					}
				}).catch((msg) => {
					t.$t.message.closeLoading();
				});
			},

			typeconfirm(e) {
				this.form.num = e[0].value
				this.form.numtext = e[0].label

			},
			//获取类
			gettypelist() {
				let t = this;
				this.$t.message.loading('加载中');
				this.$request({
					url: this.$api.common.typelist,
					data: {
						did: t.form.dictionaryid
					},
					method: 'POST'
				}).then(response => {
					this.$t.message.closeLoading();
					if (response.code === 0) {
						this.typelist = response.list;

					}
					this.$t.message.closeLoading();
				}).catch(err => {
					t.$t.message.toast(err)
				});
			},

		}
	}
</script>

<style lang="scss" scoped>
	.box {
		padding: 15rpx;
	}

	.yx {
		padding: 0 20rpx;
		margin: 0 10rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 20rpx;
		border: 1rpx solid #555555;
		border-radius: 10rpx;
		height: 50rpx;
	}

	.nm {
		width: 150rpx;
		text-align: right;
		padding-right: 10px;
	}

	.ilkresult {
		display: flex;
		flex-direction: column;
		width: 100%;
		align-items: flex-end;
	}

	/* 底部安全边距 start*/
	.tn-tabbar-height {
		min-height: 120rpx;
		height: calc(140rpx + env(safe-area-inset-bottom) / 2);
		height: calc(140rpx + constant(safe-area-inset-bottom));
	}


	.sign {
		width: 100%;
		height: 200rpx;
	}

	.photo {
		width: 100rpx;
		height: 120rpx;
		margin: 10rpx;
	}
</style>